import React, { useState, useEffect, useRef } from 'react'
import { Input, Modal, Button, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setGoodsLookType, setIsGoodsType, setIsGroup, setStoreList, } from '../../../store/module/store'
import { GroupSearch, addGoodsList } from '../../../request/api'

import './classification.css'
import Table1 from './Table1'

export default function classification() {
  const dispatch = useDispatch()

  const [name, setName] = useState<string>('')


  //检索
  const search = async () => {
    let res = await GroupSearch({ name })
    if (res.code == 200) {
      dispatch(setStoreList(res.data))
      setName('')
    }
  }

  //添加数据
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    add_goods_type()
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const [statue, setStatue] = useState<Boolean>(true)
  const [type, setType] = useState<string>('')
  const [commission, setCommission] = useState<number>()

  const add_goods_type = async () => {
    let data = {
      type,
      commission: (Number(commission) / 100 + 1).toFixed(2),
      statue,
      add_Time: new Date().getTime()
    }
    let res = await addGoodsList({ data })
    if (res.code == 200) {
      setStatue(true)
      setType('')
      setCommission(0)
      dispatch(setIsGoodsType())
    }
  }
  //数据搜索
  const [name_look,setName_look] = useState<string>('')
  const get_name_look=()=>{
    dispatch(setGoodsLookType(name_look))
    dispatch(setIsGoodsType())
  }
  //重置
  const reset=()=>{
    setName_look('')
    dispatch(setGoodsLookType(''))
    dispatch(setIsGoodsType())
  }

  return (
    <div>
      <div className='all_top'>
        <div className='top'>
          <Input size="large" placeholder="请输入内容" prefix='分类名称：'
            style={{ margin: '0.35rem', width: '5.5rem', borderRadius: '0', fontSize: '0.22rem' }} value={name_look} onChange={(event) => {
              setName_look(event.target.value)
            }} />
        </div>
        <div className='top2'>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              get_name_look()
            }}
          >检索</Button>
          <Button style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {  
              reset()
            }}
          >重置</Button>
          <Button color="danger" variant="outlined" style={{ borderRadius: '0', marginLeft: '0.3rem', fontSize: '0.25rem', padding: '0.35rem', marginBottom: '0.4rem' }}
            onClick={() => {
              showModal()
            }}
          >新建分类</Button>
        </div>
      </div >
      <div className='box'>
        <Table1></Table1>
      </div>
      <div>
        <Modal title="编辑分类" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
          footer={[
            <Button key="back" onClick={handleCancel}>取消</Button>,
            <Button key="submit" type="primary" onClick={handleOk}>确定</Button>,
          ]}
        >
          <div className='classificationBox'>
            <p><span>分类名称</span><input type="text" placeholder='请输入分类名称' value={type} onChange={(e) => setType(e.target.value)} /></p>
            <p><span>分类佣金</span><input type="number" placeholder='请输入分类佣金' value={commission} onChange={(e) => setCommission(e.target.value)} />百分比%</p>
            <p>
              <span>分类名称</span>
              <button style={{
                backgroundColor: 'white',
                padding: '0.15rem 0.3rem',
                margin: '00.2rem 0.2rem',
                color: statue ? 'red' : '',
                border: statue ? '1px solid red' : '1px solid black'
              }}
                onClick={() => {
                  setStatue(true)
                }}
              >启用</button>
              <button style={{
                backgroundColor: 'white',
                padding: '0.15rem 0.3rem',
                margin: '00.2rem 0.2rem',
                color: statue ? '' : 'red',
                border: statue ? '1px solid black' : '1px solid red'
              }}
                onClick={() => {
                  setStatue(false)
                }}
              >禁用</button>
            </p>
          </div>
        </Modal>
      </div>
    </div>
  )
}


